<template>
  <div class="main-div">
    <iframe
      id="iframe"
      width="100%"
      style="min-height: 800px"
      height="100%"

      frameborder="0"
      align="center"
      allowfullscreen="true"
      allow="autoplay"
      :src="src"
    />
  </div>

</template>

<script>
  import busObj from '@/views/common/busObj'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import {getToken} from '@/utils/auth'

  import {
    getTypesByKey,
    designSave,
  } from '@/api/form'
  export default {
    name: 'formDesign',
    components: {
      busObj,
      Treeselect
    },

    data() {
      return {
        src: null,
        categoryData: [],
        modelerSrc: '',
        busShow: false,
        baseURL: process.env.VUE_APP_BASE_BPM_API,
      }
    },
    mount() {
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      //
      var query = this.$route.query
      var id = query.id
      if (id) {
       this.src=this.baseURL+"/form/design/editor/"+id+"?t="+new Date().getTime()+"&messageId="+getToken()
      }
    },
    methods: {
//后台返回的数据如果和VueTreeselect要求的数据结构不同，需要进行转换
    normalizer(node) {
      //去掉children=[]的children属性
      if(node.children && !node.children.length){
        delete node.children;
      }
      return {
        id: node.title,
        label: node.title,
        children: node.children
      }
    },
      selectTree: function (node, instanceId) {
        this.formInline.groupId = node.id
        this.formInline.groupName = node.title
      },

      clearOnSelect: function (node, instanceId) {
        if (!node) {
          this.formInline.groupId = ''
          this.formInline.groupName = null
        }
      },
      confirmDialogSingleEvent: function (data) {
        if (data) {
          this.mainTable = data;
          this.formInline.mainTable = data.tableName
          this.formInline.formBusinessId=data.id
        }
      },
      addBus: function () {
        this.busShow = true
      },
      add: function() {
        this.$refs['formInline'].validate((valid) => {
          if (valid) {
            designSave(this.formInline).then((response) => {
             var code = response.code
              if (code==0){

              }
            })

          } else {
            this.$message({"duration":800,message:response.msg,type:'warning',customClass:'zZindex'});
          }
        })

      },
      queryFormCreateTime: function(e) {
        this.queryForm.createTime = e
      },
      refreshTask: function(data) {
        if (data[0].parentId == '-1') {
          this.queryForm.groupId = ''
        } else {
          this.queryForm.groupId = data[0].id
        }
        this.queryForm.page=1

        this.getData()
      },
      queryMethod: function() {
        var name = this.queryForm.name
        var whereSql = ''
        var createTime = this.queryForm.createTime
        if (createTime) {
          if (createTime[0]) {
            whereSql = "  CREATE_TIME_  between '" + createTime[0] + "' and " + "'" + createTime[1] + "'"
          }
        }
        this.queryForm.whereSql = whereSql
        getTaskData(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = response.count;

        })
      },
      getTypesByKeyAction:function(){
        getTypesByKey().then((response) => {
          this.categoryData = response.data
        })
      },
      initData:function(){
        this.getTypesByKeyAction();
        this.getData();
      },
      getData: function() {

        getTypesByKey().then((response) => {
          this.categoryData = response.data
        })
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getData()
      },
      handleClick(data) {
        this.$router.push({ name: 'businessTableInnerAdd', query: { t: new Date().getTime(),'id':data.id ,'operate':data.type,"edit":true}})

      },
      handleDelClick(data) {
        businessTableDel(data.id).then((response) => {
          if (response.code==0){
            this.$message({"duration":800,message:'操作成功',type:'success',customClass:'zZindex'});

            this.getData()
          }else {
            this.$message({"duration":800,message:response.msg,type:'warning',customClass:'zZindex'});

          }


        })
      },
      search() {
        this.queryForm.page = 1
        this.queryMethod()
      },
      reset() {
        this.queryForm.name = ''
        this.queryForm.createTime = ''
        this.queryForm.whereSql = ''
        this.queryDate = []
        this.getData()
      }

    }

  }

</script>
<style lang="scss">
  .task-card{
    margin-top: 10px;
  }

</style>
